<template>
  <div class="global-box">
    <a-form-model
      class="course"
      ref="courseForm"
      :model="courseForm"
      :rules="courseFormRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="课程名称" prop="name">
        <a-input v-model="courseForm.name" :maxLength="inputLength" placeholder="请输入课程名称" />
      </a-form-model-item>
      <a-form-model-item label="课程目录" prop="directory">
        <a-cascader
          :field-names="{ label: 'value', value: 'id', children: 'children' }"
          change-on-select
          :options="directoryOptions"
          :load-data="loadData"
          placeholder="请选择课程目录"
          v-model="courseForm.directory"
          @change="getType($event, 'change')"
        />
      </a-form-model-item>
      <a-form-model-item label="课程类型" prop="type">
        <a-select v-model="courseForm.type" placeholder="请选择课程类型">
          <a-select-option
            :key="item.classTypeId"
            :value="item.classTypeId"
            v-for="item in typeList"
          >
            {{ item.classTypeName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="课程属性" prop="attr">
        <a-radio-group v-model="courseForm.attr">
          <a-radio :value="item.value" :key="item.value" v-for="item in attrList">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="课程课时">
        <a-input v-model="courseForm.hour" :maxLength="inputLength" placeholder="请输入课程课时" />
      </a-form-model-item>
      <a-form-model-item label="课程排序" prop="sort">
        <a-input v-model="courseForm.sort" placeholder="请输入课程排序" @keyup="numbers" />
      </a-form-model-item>
      <a-form-model-item label="课程介绍">
        <a-input
          v-model="courseForm.desc"
          type="textarea"
          :rows="4"
          :maxLength="textareaLength"
          placeholder="请输入课程介绍"
        />
      </a-form-model-item>
      <a-form-model-item label="启用状态" prop="status">
        <a-radio-group v-model="courseForm.status">
          <a-radio :key="item.value" :value="item.value" v-for="item in statusList">{{
            item.label
          }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">提交</a-button>
        <a-button v-if="courseId === ''" style="margin-left: 10px" @click="onSubmit('add')">提交并继续添加</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { directory, type, add, courseInfo, edit } from '@/api/product/course'
export default {
  data () {
    return {
      directoryOptions: [],
      textareaLength: 200,
      inputLength: 20,
      labelCol: { span: 3 },
      wrapperCol: { span: 6 },
      courseForm: {
        name: '',
        directory: [],
        type: undefined,
        attr: 1,
        hour: '',
        sort: '',
        desc: '',
        status: 1
      },
      courseFormRules: {
        name: [
          { required: true, message: '请输入课程名称', trigger: 'blur' }
        ],
        directory: [{ required: true, message: '请选择课程目录', trigger: 'change' }],
        type: [{ required: true, message: '请选择课程类型', trigger: 'change' }],
        attr: [{ required: true, message: '请选择课程属性', trigger: 'change' }],
        sort: [{ required: true, message: '请输入课程排序', trigger: 'blur' }],
        status: [{ required: true, message: '请选择课程状态', trigger: 'change' }]
      },
      typeList: [],
      attrList: [{
        label: '录播课程',
        value: 1
      }, {
        label: '直播课程',
        value: 2
      }],
      statusList: [{
        label: '启用',
        value: 1
      }, {
        label: '禁用',
        value: 0
      }],
      courseId: '',
      oldExamId: '',
      nodes: []
    }
  },
  mounted () {
    if (this.$route.params.courseId && this.$route.params.courseId !== '') {
      this.courseId = this.$route.params.courseId
      this.getCourseInfo()
    }
    this.getDirectory()
  },
  methods: {
    // 限制排序只能输入数字
    numbers () {
      this.courseForm.sort = this.courseForm.sort.replace(/\D/g, '')
    },
    // 获取课程信息
    getCourseInfo () {
      const data = {
        courseId: this.courseId
      }
      courseInfo(data).then(res => {
        if (res.code === '1') {
          this.courseForm = {
            name: res.data.courseName,
            type: res.data.courseTypeId,
            attr: res.data.courseAttributeType,
            hour: res.data.courseHour,
            sort: res.data.courseOrder,
            desc: res.data.courseIntroduce,
            status: res.data.activeStatus,
            directory: []
          }
          this.courseForm.directory[0] = res.data.directoryId
          this.courseForm.directory[1] = res.data.examId
          this.courseForm.directory[2] = res.data.subjectId
          this.courseForm.directory[3] = res.data.fourExamId
          this.courseForm.directory[4] = res.data.fiveExamId
          this.courseForm.directory[5] = res.data.sixExamId
          this.courseForm.directory = this.courseForm.directory.filter(item => {
            return item !== 0
          })
          this.getType()
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 提交
    onSubmit (add) {
      this.$refs.courseForm.validate(valid => {
        if (valid) {
          this.addCouse(add)
        } else {
          return false
        }
      })
    },
    addCouse (flag) {
      const data = {
        activeStatus: this.courseForm.status,
        courseAttributeType: this.courseForm.attr,
        courseHour: this.courseForm.hour,
        courseIntroduce: this.courseForm.desc,
        courseName: this.courseForm.name,
        courseOrder: this.courseForm.sort,
        courseTypeId: this.courseForm.type,
        directoryId: this.courseForm.directory[0] || '',
        examId: this.courseForm.directory[1] || '',
        subjectId: this.courseForm.directory[2] || '',
        fourExamId: this.courseForm.directory[3] || '',
        fiveExamId: this.courseForm.directory[4] || '',
        sixExamId: this.courseForm.directory[5] || ''
      }
      if (this.$route.params.edit) {
        // 编辑
        data.courseId = this.courseId
        edit(data).then(res => {
          if (res.code === '1') {
            // 提交并继续添加
            this.$message.success(res.msg)
            this.$router.push({ path: '/product/course/CourseManag' })
          }
        }).catch(err => {
          this.$message.error(err.msg)
        })
      } else {
        // 添加
        add(data).then(res => {
          if (res.code === '1') {
            // 提交并继续添加
            if (flag && flag === 'add') {
              this.$refs.courseForm.resetFields()
              this.courseForm.hour = ''
              this.courseForm.desc = ''
            } else {
              this.$router.push({ path: '/product/course/CourseManag' })
            }
          }
        }).catch(err => {
          this.$message.error(err.msg)
        })
      }
    },
    // 获取课程目录
    getDirectory () {
      const data = {
        type: 0,
        directoryLevel: 1
      }
      directory(data).then(res => {
        if (res.code === '1') {
          res.data.forEach(item => {
            item.isLeaf = false
          })
          this.directoryOptions = res.data
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    // 课程目录二级
    loadData (selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      const data = {
        type: 1,
        parentId: targetOption.id,
        directoryLevel: 2
      }
      targetOption.loading = true
      directory(data).then(res => {
        if (res.code === '1') {
          if (res.data.length > 0) {
            res.data.forEach(item => {
              item.isLeaf = false
            })
            targetOption.loading = false
            targetOption.children = [...res.data]
          } else {
            targetOption.loading = false
            this.$message.error('暂无更多数据')
          }
        } else {
          targetOption.loading = false
          this.$message.error(res.msg)
        }
        this.directoryOptions = [...this.directoryOptions]
      }).catch(err => {
        this.$message.error(err.msg)
        targetOption.loading = false
      })
    },
    // 获取课程类型
    getType (e, flag) {
      if (this.courseForm.directory.length === 0) {
        this.typeList = []
        this.courseForm.type = undefined
        return false
      }
      if (!this.courseForm.directory[1]) {
        return false
      }
      if (this.oldExamId === this.courseForm.directory[1]) {
        return false
      }
      const data = {
        examId: this.courseForm.directory[1]
      }
      type(data).then(res => {
        if (res.code === '1') {
          this.typeList = res.data
          if (flag && flag === 'change') {
            this.courseForm.type = undefined
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.course {
  margin-top: 40px;
}
</style>
